<template>
	<view class="page">
		<template v-if="isLogin">

			<template v-if="loadingState.default">
				<loading :loadingState="loadingState"></loading>
			</template>

			<template v-else>
				<view class="body">   
					<view class="detail-wrap m-b2">
						<view class="detail-item">
							<view class="label">培训名称：</view>
							<view class="detail-input">
								<view class="content">
									<view class="val">{{detail.pcdata.px_name}}</view>
								</view>
							</view>
						</view>
						<view class="detail-item">
							<view class="label">培训地址：</view>
							<view class="detail-input">
								<view class="content">
									<view class="val">{{detail.pcdata.px_place}}</view>
								</view>
							</view>
						</view>
						<view class="detail-item">
							<view class="label">培训讲师：</view>
							<view class="detail-input">
								<view class="content">
									<view class="val">{{detail.pcdata.teacher_name}}</view>
								</view>
							</view>
						</view>
						
						<view class="detail-item">
							<view class="label">培训对象：</view>
							<view class="detail-input">
								<view class="content">
									<view class="val">{{detail.pcdata.px_object}}</view>
								</view>
							</view>
						</view>
						
						
						<view class="detail-item">
							<view class="label">培训人数：</view>
							<view class="detail-input">
								<view class="content">
									<view class="val">{{detail.pcdata.px_number}} </view> 
								</view>
							</view>
						</view>
						<view class="detail-item">
							<view class="label">组织单位：</view>
							<view class="detail-input">
								<view class="content">
									<view class="val">{{detail.pcdata.px_co}} </view> 
								</view>
							</view>
						</view>
						<view class="detail-item">
							<view class="label">培训日期：</view>
							<view class="detail-input">
								<view class="content">
									<view class="val">{{detail.pcdata.px_date}} </view> 
								</view>
							</view>
						</view>  
					</view>

					<view class="hd-title">培训照片</view>
					<view class="detail-wrap">
						<view class="detail-pic-item">
							<view class="detail-pic">
								<view class="pic-item" v-for="(item,index) in detail.pcFiles" :key="index">
									<image src="@/static/images/filter_bg.png" mode="widthFix">
										<!-- 占位 -->
									</image>
									<view class="img-wrap" @click="preview(index)">
										<image class="img" :src="img_path+item.file_path"
											mode="widthFix"></image>
									</view>
								</view>
							</view>
						</view>
					</view>

				</view>
 
			</template> 

		</template>

	</view>
</template>

<script>
	import loading from '@/components/loading-more.vue'
	import empty from '@/components/empty.vue'
	import { admin_img_path} from '@/config.js'
	import {
		previewImage
	} from '@/common/util.js'
	export default {
		name: 'demo',
		data() {
			return {
				isLogin: false,
				loadingState: {
					default: true,
					loading: false,
					compelted: false
				},
				id: '',
				detail: {},  
				img_path:admin_img_path
			}
		},
		onShow() {

		},
		async onLoad(params) { 
			this.id = params.id;
			this.isLogin = await this.$loginState('check');
			if (this.isLogin) {
				this.getDetail();
			}
		},
		methods: {

			// 获取详情
			getDetail: async function() {
				let res = await this.$api.ypx_api.ypxDataDetail({
					id: this.id
				})  
				 console.log(res)
				if (res.data.ret == 0) {
					this.loadingState.default = false;					 
					this.detail = res.data.data; 				 
				}
			},

			// 图片预览
			preview: function(idx) {
				let img_list = [];
				this.detail.pcFiles.forEach(item => {
					img_list.push(this.img_path + item.file_path)
				})
				previewImage({
					data: img_list,
					index: idx
				})
			}, 

		},
		computed: {

		},
		components: {
			loading,
			empty
		}
	}
</script>

<style scoped lang="less"> 
	 

	.hd-title {
		margin-bottom: 20rpx;
		padding: 0 20rpx;
		border-left: 10rpx solid #f00;
		font-size: 32rpx;
		font-weight: bold;
	}

	.project-handle-area {

		.detail-item,
		.form-item {
			border-bottom: 0 none;
		}

		.form-textarea {
			border: 1rpx solid #ddd;
		}
	}
</style>
